<template>
  <div class="manager-detail-view">
    <div class="page-header">
      <div class="header-title">
        <el-button @click="goBack" type="text" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回列表
        </el-button>
        <h1>{{ managerDetail?.manager?.fullName ? managerDetail.manager.fullName + ' 的详细信息' : '加载中...' }}</h1>
        <p class="subtitle">查看客户经理的详细工作情况和客户分配</p>
      </div>
    </div>

    <div v-if="loading" v-loading="loading" class="loading-container">
      <div class="loading-text">正在加载客户经理详情...</div>
    </div>

    <template v-else-if="managerDetail">
      <!-- 客户经理基本信息卡片 -->
      <div class="overview-cards">
        <el-card class="overview-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon total">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ managerDetail.manager.totalClients }}</div>
              <div class="stat-label">负责客户数</div>
            </div>
          </div>
        </el-card>

        <el-card class="overview-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon warning">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ managerDetail.manager.totalProjects }}</div>
              <div class="stat-label">总项目数</div>
            </div>
          </div>
        </el-card>

        <el-card class="overview-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon active">
              <el-icon><CircleCheck /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ managerDetail.manager.completedServiceProjects }}</div>
              <div class="stat-label">已完成服务项目</div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 服务项目进度 -->
      <el-card class="section-card" shadow="never">
        <template #header>
          <div class="section-header">
            <h2>
              <el-icon class="header-icon"><List /></el-icon>
              服务项目完成情况
            </h2>
            <p class="section-desc">该客户经理负责的各项服务的完成进度</p>
          </div>
        </template>
        
        <el-table 
          :data="managerDetail.serviceStats" 
          style="width: 100%"
          v-loading="loading"
          empty-text="暂无服务项目数据"
        >
          <el-table-column prop="serviceName" label="服务项目" width="200">
            <template #default="scope">
              <div class="service-name">{{ scope.row.serviceName }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="totalTasks" label="总客户数" width="100" align="center" />
          <el-table-column prop="completedTasks" label="已完成客户数" width="100" align="center" />
          <el-table-column prop="completionRate" label="完成率" width="150" align="center">
            <template #default="scope">
              <el-progress 
                :percentage="scope.row.completionRate" 
                :status="scope.row.completionRate < 30 ? 'exception' : scope.row.completionRate < 70 ? 'warning' : 'success'"
                :stroke-width="8"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 负责客户列表 -->
      <el-card class="section-card" shadow="never">
        <template #header>
          <div class="section-header">
            <h2>
              <el-icon class="header-icon"><User /></el-icon>
              负责客户列表
            </h2>
            <p class="section-desc">该客户经理负责的所有客户信息</p>
          </div>
        </template>
        
        <el-table 
          :data="managerDetail.clients" 
          style="width: 100%"
          empty-text="暂无客户数据"
        >
          <el-table-column prop="clientCode" label="客户代码" width="120" />
          <el-table-column prop="clientName" label="客户名称" width="200" />
          <el-table-column prop="marketType" label="市场类型" width="100" align="center" />
          <el-table-column prop="terminalType" label="终端类型" width="150" align="center" />
        </el-table>
      </el-card>

      <!-- 最近工作日志 -->
      <el-card class="section-card" shadow="never">
        <template #header>
          <div class="section-header">
            <h2>
              <el-icon class="header-icon"><List /></el-icon>
              最近工作日志
            </h2>
            <p class="section-desc">最近完成的工作记录</p>
          </div>
        </template>
        
        <el-table 
          :data="managerDetail.recentWorkLogs" 
          style="width: 100%"
          empty-text="暂无工作日志"
        >
          <el-table-column prop="clientName" label="客户名称" width="150" />
          <el-table-column prop="clientCode" label="客户代码" width="120" />
          <el-table-column prop="serviceName" label="服务项目" width="150" />
          <el-table-column prop="completionDate" label="完成日期" width="120" align="center" />
          <el-table-column prop="notes" label="备注" />
          <el-table-column prop="createdAt" label="创建时间" width="120" align="center" />
        </el-table>
      </el-card>
    </template>

    <div v-else class="error-container">
      <el-empty description="未找到客户经理信息或该客户经理已被删除" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import {
  ArrowLeft,
  User,
  CircleCheck,
  Trophy,
  List
} from '@element-plus/icons-vue';
import { trpc } from '../../utils/trpc';

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const managerDetail = ref(null);

const managerId = Number(route.params.id);

// 返回按钮逻辑
const goBack = () => {
  router.push('/manager-details');
};

// 加载客户经理详情数据
const loadManagerDetail = async () => {
  if (!managerId || isNaN(managerId)) {
    ElMessage.error('无效的客户经理ID');
    router.push('/manager-details');
    return;
  }

  loading.value = true;
  try {
    console.log('开始加载客户经理详情，ID:', managerId);
    const result = await trpc.stats.managerDetail.query({ managerId });

    console.log('客户经理详情API返回结果:', result);

    if (result.success && result.data) {
      managerDetail.value = result.data;
      console.log('客户经理详情加载成功:', result.data);
    } else {
      console.error('获取客户经理详情失败:', result.message);
      ElMessage.error(result.message || '获取客户经理详情失败');
    }
  } catch (error) {
    console.error('加载客户经理详情失败:', error);
    ElMessage.error('加载数据失败，请检查网络连接');
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadManagerDetail();
});
</script>

<style scoped>
.manager-detail-view {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  margin-bottom: 32px;
}

.header-title h1 {
  margin: 8px 0;
  font-size: 28px;
  font-weight: 600;
  color: #262626;
}

.back-btn {
  font-size: 14px;
  padding: 0;
  margin-bottom: 8px;
  color: #1890ff;
}

.back-btn:hover {
  color: #40a9ff;
}

.subtitle {
  margin: 0;
  color: #8c8c8c;
  font-size: 16px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.loading-text {
  font-size: 16px;
  color: #8c8c8c;
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.overview-card {
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.total {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.active {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-icon.warning {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.stat-icon.completion {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #262626;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #8c8c8c;
}

.section-card {
  margin-bottom: 32px;
  border-radius: 12px;
}

.section-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  font-size: 18px;
}

.section-desc {
  margin: 0;
  color: #8c8c8c;
  font-size: 14px;
}

.service-name {
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .manager-detail-view {
    padding: 16px;
  }
  
  .overview-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
  
  .stat-number {
    font-size: 24px;
  }
}
</style>